<template>
  <el-dialog
    :title="form.id ? '编辑随访' : '新建随访'"
    :visible="value"
    @close="handleClose"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="110px">
      <el-form-item label="随访时间" prop="visitTime">
        <el-date-picker
          v-model="form.visitTime"
          type="datetime"
          :picker-options="pickerOptions"
          :editable="false"
          clearable
          placeholder="选择日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="随访医生" prop="visitDoctor">
        <el-select
          v-model="form.visitDoctor"
          placeholder="请选择随访医生"
          style="width: 220px"
        >
          <el-option
            v-for="options in doctorList"
            :key="options.userId"
            :label="options.userName"
            :value="options.userName"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-col>
        <el-form-item label="创建人员" prop="createBy">
          <div style="width: 220px">
            <el-input v-model="userName" readonly />
          </div>
        </el-form-item>
      </el-col>
      <el-form-item label="随访内容" prop="contet">
        <el-input
          v-model="form.contet"
          class="card__input"
          type="textarea"
          :rows="3"
        ></el-input>
      </el-form-item>
      <el-form-item label="随访结果" prop="result">
        <el-input
          v-model="form.result"
          class="card__input"
          type="textarea"
          :rows="3"
        ></el-input>
      </el-form-item>
      <el-button
        type="primary"
        :loading="formLoading"
        @click="handleSubmit(returnVisitStatusEnum['待计划'])"
      >
        随访未完成
      </el-button>
      <el-button
        type="primary"
        :loading="formLoading"
        @click="handleSubmit(returnVisitStatusEnum['已完成'])"
      >
        随访完成
      </el-button>
      <el-button @click="handleVisible">取消</el-button>
    </el-form>
  </el-dialog>
</template>

<script>
import dayjs from 'dayjs'
import { mapState } from 'vuex'
import { addDoctor } from '@/api/services/doctor'
import { listStaff } from '@/api/services/common'
import store from '@/store'
import {
  returnVisitStatusOptions,
  trackingStatusOptions,
  consumeStatusOptions,
} from '@/utils/options'
import { returnVisitStatusEnum, trackingStatusEnum } from '@/utils/enums'

const FORM_DATA = {
  visitTime: undefined,
  trackStatus: undefined,
  consumeStatus: undefined,
  visitPerson: undefined,
  visitStatus: undefined,
  contet: undefined,
  result: undefined,
}

export default {
  name: 'UpdateVisit',
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    patient: {
      type: Object,
      default: () => ({}),
    },
    data: {
      type: Object,
      default: () => ({}),
    },
    doctorList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      loading: false,
      formLoading: false,
      form: {},
      // 表单校验
      rules: {
        visitDoctor: [
          { required: true, message: '随访人员不能为空', trigger: 'blur' },
        ],
        trackStatus: [
          { required: true, message: '跟踪状态不能为空', trigger: 'blur' },
        ],
        consumeStatus: [
          { required: true, message: '消费状态不能为空', trigger: 'blur' },
        ],
        contet: [
          { required: true, message: '回访内容不能为空', trigger: 'blur' },
        ],
        visitTime: [
          { required: true, message: '回访时间不能为空', trigger: 'blur' },
        ],
      },
      pickerOptions: {
        firstDayOfWeek: 1,
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7
        },
      },
    }
  },
  computed: {
    ...mapState({
      userName: (state) => state.user.name,
      clinicId: (state) => state.clinic.clinicId,
      clinicName: (state) => state.clinic.clinicName,
    }),
    trackingStatusOptions() {
      return trackingStatusOptions
    },
    returnVisitStatusOptions() {
      return returnVisitStatusOptions
    },
    consumeStatusOptions() {
      return consumeStatusOptions
    },
    returnVisitStatusEnum() {
      return returnVisitStatusEnum
    },
    trackingStatusEnum() {
      return trackingStatusEnum
    },
  },
  watch: {
    value(val) {
      if (val) {
        this.init()
      } else {
        this.$refs.form.resetFields()
      }
    },
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.form = { ...FORM_DATA, ...this.data }
    },
    /**
     * 获取tc列表
     */
    handleClose() {
      this.$emit('close', false)
    },
    handleVisible() {
      this.form = {}
      this.handleClose()
    },
    handleSubmit(visitStatus) {
      this.$refs.form.validate(async (valid) => {
        try {
          if (!valid) {
            return
          }
          this.formLoading = true
          const { id: clinicPersonId, name, phoneNumber } = this.patient
          const formData = {
            ...this.form,
            visitStatus,
            visitTime: dayjs(this.form.visitTime).format('YYYY-MM-DD HH:mm:ss'),
            clinicPersonId,
            createBy: this.userName,
          }
          if (visitStatus === returnVisitStatusEnum['已完成']) {
            formData.visitFinishTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
          }
          await addDoctor(formData)
          this.msgSuccess('添加成功')
          this.$emit('ok')
          this.form = {}
        } finally {
          this.formLoading = false
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped></style>
